<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			th,td{
				padding: 10px 30px;
				border:1px solid white;
			}
			th{
				
				
				font-size:17px;
				background-color: #09c;
				color: white;
				
			}
			body{
				font-family:"微软雅黑";
				font-size: 14px;
				text-align: center;
			}
			table{
				margin:0 auto;
				border-collapse: collapse;
			}
			.greyA{
				background-color: rgb(155,155,155);
			}
			.greyB{
				background-color: rgb(211,211,211);
			}
		</style>
		<script>
			onload=function(){
				var trs = document.getElementsByTagName("tr");
				for(var i = 1; i< trs.length; i++)
				{
					trs[i].onmouseover = function(){
						this.className = "";
					}
					if(i%2==0){
						trs[i].onmouseout = function(){getGreyA(this);};
						getGreyA(trs[i]);
					}else{
						trs[i].onmouseout = function(){getGreyB(this);};
						getGreyB(trs[i]);
					}
				}

			}
			
			 function getGreyA(node){
				node.className+=" greyA";
			}
			function getGreyB (node){
				node.className+=" greyB";
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>课程</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>数学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>3</td>
				<td>张三三</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>4</td>
				<td>王五</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>5</td>
				<td>赵六</td>
				<td>语文</td>
				<td>100</td>
			</tr>
		</table>
	</body>
</html>
